<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar class="navbar">
      <template #title>
        <van-button icon="search" round type="default" @click="seatch"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <div>
      <van-tabs v-model="active" swipeable>
        <van-tab :title="itms.name" v-for="itms in channal" :key="itms.id">
          <compon-tns :atc-list="itms.id"></compon-tns>
        </van-tab>

        <span
          class="toutiao toutiao-gengduo"
          @click="isshowe = !isshowe"
        ></span>
      </van-tabs>
    </div>
    <!-- 弹出窗 -->
    <van-popup
      v-model="isshowe"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <pupit
        :my-chinons="channal"
        @addchinnel="addchanlist"
        @deleMychinner="deleMy"
        @activunp=";[(active = $event), (isshowe = false)]"
      ></pupit>
    </van-popup>
  </div>
</template>

<script>
import pupit from './components/Editpopup.vue'
import { getchanneApi, delMychanneApi, addMyChanneApi } from '@/api'
import { mapGetters, mapMutations } from 'vuex'
import ComponTns from './components/componenlist.vue'
export default {
  name: 'home',
  components: { ComponTns, pupit },
  data() {
    return {
      active: 0,
      channal: [],
      show: false,
      isshowe: false
    }
  },
  computed: {
    ...mapGetters(['isgetshow'])
  },
  created() {
    this.loginis()
  },
  methods: {
    ...mapMutations(['OUTLOGIN']),
    async getWyinfo() {
      const { data } = await getchanneApi()
      this.channal = data.data.channels
    },
    //判断是否处于登录状态
    async loginis() {
      //是否是登录状态
      if (this.isgetshow) {
        //处于登录状态 调用数据
        this.getWyinfo()
      } else {
        //用户没有登录
        const { outlogin } = this.$store.state
        if (outlogin.length > 0) {
          //大于0则是本地有数据直接使用
          this.channal = outlogin
        } else {
          //本地没有数据进行网络请求,获取数据以后存入本地
          await this.getWyinfo()
          this.$store.state.outlogin = this.channal
        }
      }
    },
    seatch() {
      this.$router.push({
        path: '/seatch'
      })
    },
    //删除
    async deleMy(id) {
      try {
        this.$toast.loading({
          message: '正在删除',
          forbidClick: true
        })
        const newchann = this.channal.filter((itms) => itms.id !== id)
        if (this.isgetshow) {
          //若果登录,将数据添加到数据库
          await delMychanneApi(id)
        } else {
          //如果未登录,将删除的数据添加到本地储存
          this.OUTLOGIN(newchann)
        }
        this.channal = newchann
        this.$toast.success('删除成功')
      } catch (error) {
        this.$toast.fail('删除失败')
      }
    },
    //添加
    async addchanlist(val) {
      try {
        this.$toast.loading({
          message: '正在添加',
          forbidClick: true
        })
        if (this.isgetshow) {
          //若果登录,将数据添加到数据库
          await addMyChanneApi(val.id, this.channal.length)
        } else {
          //如果未登录,将加过的数据添加到本地储存
          this.OUTLOGIN([...this.channal, val])
        }
        this.channal.push(val)
        this.$toast.success('添加成功')
      } catch (error) {
        this.$toast.fail('添加失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
:deep(.navbar) {
  background-color: #2c9dfb;
  .van-icon {
    color: unset;
  }
  .van-nav-bar__title {
    max-width: unset;
    .van-button--normal {
      width: 570px;
      height: 60px;
    }
  }
}
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  opacity: 0.6;
  border-bottom: 1px solid #eee;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-image: url('~@/assets/images/gradient-gray-line.png');
  }
}
</style>
